<template>
    <div class="trends f f-ac f-jc">
        <div class="trends-body">
            <Sub-title :label="title" padding="30px 0 10px" :color=" id%2 == '0' ? '#fff' : '#000'" />
            <div class="f f-col f-ac f-jc">
                <img src="../../../assets/mountain-white.png" width="261px" height="80px" />
                <div class="fy-title mb-30" :style="{color: id%2 == '0' ? '#fff' : '#000'}">{{title}}</div>
            </div>
            <div class="f f-ac f-jb">
                <div class="body-left" @click="handleDetail(dataList[0])">
                    <img v-if="dataList[0]" :src="baseUrl + dataList[0].image" width="100%" height="100%" />
                    <div v-if="dataList[0]"  class="right-title line-1">{{ dataList[0].title || "-" }}</div>
                </div>
                <div class="f-1 body-right">
                    <div v-for="(i, k) in dataList" :key="k" class="item f f-ac f-jb" :class="{ hover: i.hover } "
                        v-if='k!=0' @mouseover="i.hover = true" @mouseleave="i.hover = false" @click="handleDetail(i)">
                        <div class="item-left">
                            <div class="round f f-col f-ac f-jc">
                                <div class="day">{{ splitData(i.createtime, "day") }}</div>
                                <div class="month">{{ splitData(i.createtime, "month") }}</div>
                            </div>
                        </div>
                        <div class="item-right f-1">
                            <div class="title line-1 mb-20">{{ i.title || "-" }}</div>
                            <div class="content line-2">{{ i.msg || "-" }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="f f-jc mt-60 mb-40">
                <My-btn label="查看更多" width="198" height="52" bgColor="line-blue" @click="handleMore" />
            </div>
        </div>
    </div>
</template>

<script>
    import {
        heritageList
    } from "@/utils/heritage/index.js";
    export default {
        data() {
            return {
                baseUrl: process.env.VUE_APP_BASE_API,
                dataList: [],
            };
        },
        created() {
            this.getList();
        },
        props: {
            // 表单名称
            id: {
                type: Number,
                default: 1,
            },
            title: {
                type: String,
                default: '',
            },
        },
        mounted() {},

        methods: {
            // 获取项目列表
            getList() {
                let that = this
                let data = {
                    heritage_category_id: this.id,
                    title: '',
                    type: '',
                    page: 1,
                    limit: 4,
                    recommend: 2
                }
                heritageList(data).then((response) => {
                    that.dataList = response.data.list
                });
            },
            // 拆分日期
            splitData(date, unit) {
                date = date ? date.trim().split(' ')[0] : ""
                if (unit == "day") {
                    return date.substr(8, 2);
                } else if (unit == "month") {
                    return date.substr(0, 7);
                } else {
                    return date || "-";
                }
            },
            // 查看详情
            handleDetail(item) {
                this.$router.push({
                    path: "/cultural/trendsDetails",
                    query: {
                        id: item.id,
                    },
                });
            },
            // 查看更多
            handleMore(v) {
                // console.log(this.id,"trends")
                this.$router.push({
                    path: "/cultural/culturalList",
                    query: {
                        type: this.id,
                    },
                });
            },
        },
    };
</script>

<style lang="scss" scoped>
    .trends {
        width: 100%;
        max-height: 805px;
        /* background-color: #fff; */

        &-body {
            width: 1200px;
            height: 100%;

            .fy-title {
                margin-top: 15px;
                color: #313131;
                font-family: FZZhengHeiS-B-GB;
                font-size: 20px;
            }

            .body-left {
                position: relative;
                height: 425px;
                cursor: pointer;
                margin-right: 13px;

                .right-title {
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    box-sizing: border-box;
                    height: 68px;
                    color: #fff;
                    padding: 0 20px;
                    line-height: 68px;
                    background-color: #00000080;
                }
            }

            .body-right {
                width: 575px;

                .item {
                    width: 100%;
                    height: 130px;
                    background-color: #f4f4f4;
                    margin-bottom: 18px;
                    color: #313131;

                    &-left {
                        width: 142px;

                        .round {
                            width: 76px;
                            height: 76px;
                            text-align: center;
                            border-radius: 50%;
                            border: 1px solid #313131;
                            margin: auto;
                            overflow: hidden;
                            font-weight: bold;

                            .day {
                                font-size: 25px;
                                line-height: 26px;
                            }

                            .month {
                                font-size: 14px;
                                line-height: 26px;
                            }
                        }
                    }

                    &-right {
                        width: 433px;
                        padding-right: 20px;
                        box-sizing: border-box;

                        .title {
                            font-size: 16px;
                            font-weight: bold;
                        }

                        .content {
                            font-size: 14px;
                        }
                    }

                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }
        }
    }

    .hover {
        color: #fff !important;
        cursor: pointer;
        background-color: #193980 !important;

        .round {
            border: 1px solid #fff !important;

            .day::after {
                background-color: #fff !important;
            }
        }
    }
</style>